//生产管理系统/数据趋势分析
import React, { Component } from 'react';
import { connect } from 'dva';
import {Checkbox, Card, DatePicker, Button, message} from 'antd';
import style from './EnvHistory.less';
import moment from 'moment';
import {EnvHisQuery} from '../../../services/redmoe';
import EnvHisEcharts from './EnvHisEcharts'
//日期选择器套件
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;



var dataText;

class EnvHistory extends Component {
    state = {
        startDate:null,
        startValue: null,
        endValue: null,
        endOpen: false,
        arr:[],
        co:false,
        cod:false,
        hcl:false,
        nox:false,
        ph:false,
        pl:false,
        checkText:[],
        echarts:{}
    };

    //页面进入事件
    componentDidMount () {
        let data = {
            startValue:moment().format("YYYY-MM-DD HH:mm:ss"),
            endValue:moment().format("YYYY-MM-DD HH:mm:ss"),
            types:""
        }
        EnvHisQuery({...data}).then(data => {
            console.log(data)
        })
    }


   //日期选择器
   disabledStartDate = (startValue) => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }

  disabledEndDate = (endValue) => {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
   
    let one = startValue.valueOf() +1000*60*60*72;
  
    return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() >= one ;
  }

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  }

  onStartChange = (value) => {
    this.onChange('startValue', value);
  }

  onEndChange = (value) => {
    this.onChange('endValue', value);
  }

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
  }

        //重置事件
        reset = () => {

            this.setState({
                startValue:null,
                endValue:null,
                checkText:[],
                co:false,
                pl:false,
                ph:false,
                nox:false,
                cod:false,
                hcl:false,
            })

            let data = {
                startValue:moment().format("YYYY-MM-DD HH:mm:ss"),
                endValue:moment().format("YYYY-MM-DD HH:mm:ss"),
                types:"co"
            }
            EnvHisQuery({...data}).then(data => {
                this.setState({
                    echarts:{},
                    checkText:[],
                    arr:[]
                })
                 dataText = ""
            })

           
           
    
          }
    
    //查询事件
    save = () => {
        console.log(this.state.startValue)
       
        dataText = this.state.arr.join(",")
        console.log(dataText)
        if(this.state.endValue == null || this.state.startValue == null) {
            message.warning('请将时间选取完整!');
            return;
        }
        let data ={
            startTimeStr:moment(this.state.startValue).format("YYYY-MM-DD 00:00:00") ,
            endTimeStr:moment(this.state.endValue).format("YYYY-MM-DD 00:00:00"),
            types:dataText
        }
        EnvHisQuery({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                this.setState({
                    echarts:data.data.ret
                })
            }else {
                message.warning(data.data.err)
            }
        })
       
    }
 
     //多选框事件
     Check = (e) => {

      
        if(e.target.checked == true) {

            this.state.arr.push(e.target.value)
            if(e.target.value == "co") {
                this.setState({
                    co:true
                })
                this.state.checkText.push("一氧化碳")

            }
            if(e.target.value == "cod") {
                this.setState({
                    cod:true
                })
                this.state.checkText.push("COD")
            }
            if(e.target.value == "hcl") {
                this.setState({
                    hcl:true
                })
                this.state.checkText.push("氯化氢")
            }
            if(e.target.value == "pl") {
                this.setState({
                    pl:true
                })
                this.state.checkText.push("颗粒物")
            }
            if(e.target.value == "ph") {
                this.setState({
                    ph:true
                })
                this.state.checkText.push("pH")
            }
            if(e.target.value == "nox") {
                this.setState({
                    nox:true
                })
                this.state.checkText.push("氮氧化物")
            }
        }
      
       
        if(e.target.checked == false) {
          var i = this.state.arr.indexOf(e.target.value)
          console.log(i)
          this.state.arr.splice(i,1)
          this.state.checkText.splice(i,1)
        if(e.target.value == "co") {
            this.setState({
                co:false
            })
        }
        if(e.target.value == "cod") {
            this.setState({
                cod:false
            })
        }
        if(e.target.value == "hcl") {
            this.setState({
                hcl:false
            })
        }
        if(e.target.value == "pl") {
            this.setState({
                pl:false
            })
        }
        if(e.target.value == "ph") {
            this.setState({
                ph:false
            })
        }
        if(e.target.value == "nox") {
            this.setState({
                nox:false
            })
        }
        }
       
    
        //多选框查询事件
        setTimeout(() => {
            this.save()
        },200)
       
       

    }


    render() {
        const { startValue, endValue, endOpen } = this.state;
        return (



          

                  <div>
                      
                        <Card
                            className={style.CardTop}
                        >
                            <div className={style.Top}>
                            开始时间:<DatePicker
                            disabledDate={this.disabledStartDate}
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            size="small"
                            value={startValue}
                            placeholder="开始时间"
                            onChange={this.onStartChange}
                            onOpenChange={this.handleStartOpenChange}
                            style={{width:"25vh",marginRight:10}}
                            />

                            结束时间:<DatePicker
                            disabledDate={this.disabledEndDate}
                            showTime
                            size="small"
                            format="YYYY-MM-DD HH:mm:ss"
                            value={endValue}
                            placeholder="结束时间"
                            onChange={this.onEndChange}
                            open={endOpen}
                            onOpenChange={this.handleEndOpenChange}
                            style={{width:"25vh",marginRight:10}}
                            />

                             添加指标:
                            <Checkbox checked={this.state.co} value="co" onChange={this.Check} style={{marginLeft:15}}>一氧化碳</Checkbox>
                            <Checkbox checked={this.state.pl} value="pl" onChange={this.Check}>颗粒物</Checkbox>
                            <Checkbox checked={this.state.nox} value="nox" onChange={this.Check}>氮氧化物</Checkbox>
                            <Checkbox checked={this.state.hcl} value="hcl" onChange={this.Check}>氯化氢</Checkbox>
                            <Checkbox checked={this.state.cod} value="cod" onChange={this.Check}>COD</Checkbox>
                            <Checkbox checked={this.state.ph} value="ph" onChange={this.Check}>pH</Checkbox>
                              
                               
                                <Button type="primary" className={style.primary} onClick={this.save}>查询</Button>
                                <Button className={style.reset} onClick={this.reset}>重置</Button>
                            </div>

                        </Card>
                        <Card
                            className={style.CardBottom}
                         id="main"
                         >
                        <EnvHisEcharts
                        data={this.state.echarts}
                        checkText={this.state.checkText}
                        />
                        </Card>
                        

                   
                  </div>
           

           

        )
    }
}

export default connect()(EnvHistory)